<template>
  <div class="admin">
    <div
      class="table-head-container d-flex justify-content-between align-items-center"
      :class="{ 'table-head-container-new': tableClass }"
    >
      <flexbox class="th-container">
        <div class="table-option-view">
          <template v-for="(item, index) in getSelectionHandleItemsInfo()">
            <div
              class="d-flex align-items-center"
              v-if="item.name"
              :key="index"
            >
              <div class="ml-16" style="text-wrap: nowrap">
                {{ item.name }}：
              </div>
              <el-input
                v-model="queryOptions[item.type]"
                :placeholder="item.placeholder"
                style="width: 180px;"
                clearable
              ></el-input>
            </div>
          </template>
          <!-- 搜索 -->
          <el-button
            type="primary"
            @click="searchInput"
            icon="el-icon-search"
            style="margin-left: 16px"
            >搜索</el-button
          >

          <el-button class="dup-check-btn" @click="reset">重置</el-button>

          <!-- 新建 -->
          <el-button
            v-if="mainTitle"
            type="primary"
            class="create-btn"
            icon="el-icon-plus"
            @click="createClick"
            >{{ mainTitle }}</el-button
          >
          <!-- 高级筛选 -->
          <el-button
            v-if="showFilterView"
            type="primary"
            class="filter-button ml-16"
            icon="wk wk-screening"
            @click="showFilterClick"
            >高级筛选</el-button
          >
        </div>
      </flexbox>
      <!-- 导出 -->
      <div class="export-wrap d-flex">
        <el-button
          type="primary"
          class="out"
          @click="exportSubmit(outName)"
          v-if="outName"
          >导出</el-button
        >
      </div>
    </div>
    <filter-content
      v-if="filterObj.form && filterObj.form.length > 0"
      :obj="filterObj"
      @delete="handleDeleteField"
    />
    <SignatureCreate
      v-if="isCreate && crmType === 'signature'"
      :active="createActionInfo"
      @save-success="createSaveSuccess"
      @close="hideView"
    ></SignatureCreate>

    <templateConfigCreate
      v-if="isCreate && crmType === 'templateConfig'"
      :show="isCreate"
      :active="createActionInfo"
      @save-success="createSaveSuccess"
      @close="hideView"
    >
    </templateConfigCreate>

    <!-- 高级筛选弹框 -->
    <filter-form
      v-if="showFilterView"
      :field-list="fieldList"
      :dialog-visible.sync="showFilter"
      :obj="filterObj"
      :crm-type="crmType"
      @filter="handleFilter"
    />
  </div>
</template>

<script>
import SignatureCreate from "@/views/admin/Agreement/signature/Create"; // 新增签章签署弹框
import templateConfigCreate from "@/views/admin/Agreement/template-config/Create"; // 新增模板配置弹框
import signingRecordCreate from "@/views/admin/Agreement/signature/Create"; // 新增签署记录弹框
import FilterForm from "@/views/crm/components/FilterForm";
import FilterContent from "@/views/crm/components/FilterForm/FilterContent";

import { getCrmField } from "@/api/admin/agreement";
import { filterIndexfieldsAPI } from "@/api/crm/common";
export default {
  name: "CRMHead",
  components: {
    SignatureCreate,
    templateConfigCreate,
    signingRecordCreate,
    FilterForm,
    FilterContent
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    mainTitle: {
      type: String,
      default: ""
    },
    crmType: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "请输入内容"
    },
    tableClass: {
      type: Boolean,
      default: false
    },
    createFun: Function,
    showDupCheck: {
      type: Boolean,
      default: false
    },
    // 是否展示高级筛选
    showFilterView: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false, // loading
      loadingObj: null, // loading 对象
      isCreate: false, // 创建
      showFilter: false, // 控制筛选框
      outName: false,
      //   新增
      createActionInfo: { type: "save" },
      queryOptions: {
        enterpriseName: null, // 公司名称
        sealNo: null, // 签章编号
        sealName: null, // 签章名称
        templateNo: null, // 模板编号
        templateName: null // 模板名称
      },
      companyList: [],
      fieldList: [],
      filterObj: {
        form: []
      } // 筛选确定数据
    };
  },
  computed: {},
  watch: {
    loading(val) {
      if (val) {
        this.loadingObj = Loading.service({
          target: document.querySelector("#crm-main-container")
        });
      } else {
        this.loadingObj && this.loadingObj.close();
      }
    }
  },
  mounted() {
    if (this.crmType === "signingRecord") {
      this.outName = "out";
    }
  },
  methods: {
    showContTips() {
      this.showContractTip = Date.now();
    },
    // 新增操作
    createClick() {
      if (this.createFun) {
        this.createFun();
      } else {
        this.createActionInfo = { type: "save" };
        this.isCreate = !this.isCreate;
      }
    },

    // 保存
    createSaveSuccess(data) {
      if (data && data.createContacts) {
        if (data.type == "customer") {
          this.createActionInfo = {
            type: "relative",
            crmType: "customer",
            data: {}
          };
          this.createActionInfo.data["customer"] = data.data;
          this.isCreate = true;
        }
      } else {
        // 回到保存成功
        this.$emit("handle", { type: "save-success" });
      }
    },

    // 重置
    reset() {
      this.queryOptions = {
        enterpriseName: null, // 公司名称
        sealNo: null, // 签章编号
        sealName: null, // 签章名称
        templateNo: null, // 模板编号
        templateName: null // 模板名称
      };
      // 搜索
      this.searchInput();
    },
    // 新加的
    inputChange() {
      this.$emit("update:search", this.queryOptions);
    },
    searchInput() {
      this.$emit("on-search", this.queryOptions);
    },
    manageDepSave() {},
    /** 获取展示items */
    getSelectionHandleItemsInfo() {
      const handleInfos = {
        enterpriseName: {
          name: "公司名称",
          type: "enterpriseName",
          placeholder: "请输入公司名称"
        },
        search: {
          name: "学员",
          type: "search",
          placeholder: "请输入学员姓名/电话",
          width: "120px"
        },
        sealNo: {
          name: "签章编号",
          type: "sealNo",
          placeholder: "请输入签章编号"
        },
        sealnoName: {
          name: "签章名称",
          type: "sealName",
          placeholder: "请输入签章名称"
        },
        templateNo: {
          name: "模板编号",
          type: "templateNo",
          placeholder: "请输入模板编号"
        },
        templateName: {
          name: "模板名称",
          type: "templateName",
          placeholder: "请输入模板名称"
        }
      };
      // ROI消耗
      if (this.crmType === "signature") {
        return this.forSelectionHandleItems(handleInfos, [
          "enterpriseName",
          "sealNo",
          "sealnoName"
        ]);
      } else if (this.crmType === "templateConfig") {
        return this.forSelectionHandleItems(handleInfos, [
          "templateNo",
          "templateName"
        ]);
      } else if (this.crmType === "signingRecord") {
        return this.forSelectionHandleItems(handleInfos, ["search"]);
      }
    },

    forSelectionHandleItems(handleInfos, array) {
      const tempsHandles = [];
      for (let index = 0; index < array.length; index++) {
        tempsHandles.push(handleInfos[array[index]]);
      }
      return tempsHandles;
    },

    hideView() {
      this.isCreate = false;
    },

    /** 展示高级筛选 */
    showFilterClick() {
      this.getFilterFieldInfo();
    },
    // 获取高级筛选字段数据
    getFilterFieldInfo() {
      filterIndexfieldsAPI({
        label: 28
      })
        .then(res => {
          this.fieldList = res.data;
          this.showFilter = true;
        })
        .catch(() => {});
    },

    // 高级筛选选择
    handleFilter(form) {
      this.filterObj = form;
      this.showFilter = false;
      // if (form.saveChecked) {
      //   crmSceneSaveAPI({
      //     type: crmTypeModel[this.crmType],
      //     isDefault: form.saveDefault ? 1 : 0,
      //     name: form.saveName,
      //     data: JSON.stringify(form.obj)
      //   })
      //     .then(res => {
      //       this.updateSceneList();
      //     })
      //     .catch(() => {});
      // }
      this.$emit("filter", form.obj);
    },

    // 高级筛选 删除
    handleDeleteField(data) {
      this.filterObj = data.obj;
      this.$emit("filter", this.filterObj.obj);
    },

    // 导入导出点击
    exportSubmit(name) {
      if (name == "out") {
        this.$emit("on-export");
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.table-head-container {
  padding: 14px 16px;
  background: white;
  margin: 0;
}
.table-head-container-new {
  padding: 14px 0;
  margin-left: -16px;
}
.th-container {
  font-size: 14px;
  .scene-select {
    width: 180px;

    /deep/ .el-input__inner {
      cursor: pointer;
    }
  }

  .filter-button {
    /deep/ i {
      font-size: 14px;
      margin-right: 5px;
    }
  }
}

/deep/ .el-date-editor .el-range__icon {
  line-height: 26px;
}
/deep/ .el-date-editor .el-range-separator {
  line-height: 26px;
}
.table-option-view {
  display: flex;
  align-items: center;
  .filter-button {
    /deep/ i {
      font-size: 14px;
      margin-right: 5px;
    }
  }
}
.create-btn {
  background: #07bf50;
  border-color: #07bf50;
  border-radius: 4px;
  color: #fff;
}

.export-wrap {
  height: 32px;
  .out {
    background-color: #ff6a00;
    border-color: #ff6a00;
  }
}
.ml-16 {
  margin-left: 16px;
}
.mr-16 {
  margin-right: 16px;
}
</style>
